import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Button, Input, Checkbox, Spin, Form, message } from 'antd';
import logoImg from 'assets/images/logo1.png';
import './index.less';
import { Link, useNavigate, useNavigation } from 'react-router-dom';
import { MyButton } from '@/components/MyButton';
import { LoginPayload, login } from '../service';
import { setToken } from '@/utils/auth';
const { Content } = Layout;
const FormItem = Form.Item;

export default function Login() {
  const navigate = useNavigate()
  const handleSubmit = (values: LoginPayload) => {
    login(values).then((res: any) => {
      //console.log(res)
      setToken(res.data.token)
      navigate('/')
    }).catch((err) => {
      message.error(`err: ${err}`)
    })
  };
  return (
    <Layout className="full-layout login-page">
      <Content>
        <Form onFinish={(args) => handleSubmit(args)} className="login-form" initialValues={{ userName: 'admin', password: 'admin', remember: true }}>
          <div className="user-img">
            <img src={logoImg} alt="logo" />
            <b>Friday</b>
            <span>Admin</span>
          </div>
          <FormItem name="userName" rules={[{ required: true, message: '请输入您的用户名，示例admin' }]}>
            <Input
              size="large"
              prefix={<UserOutlined />}
              placeholder="用户名"
            />
          </FormItem>
          <FormItem name="password" rules={[{ required: true, message: '请输入您的密码，示例admin' }]}>
            <Input
              size="large"
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
            />
          </FormItem>
          <FormItem name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住我</Checkbox>
          </FormItem>
          <Link className="login-form-forgot" to="#">
            忘记密码
          </Link>
          <MyButton
            className="login-form-button"
          >
            登录
          </MyButton>
          <div className="new-user">
            新用户？<Link to="/sign/register">现在注册</Link>
          </div>
        </Form>
      </Content>
    </Layout>
  );
}
